<div class="easyui-layout"  style="width:700px;height:400px;">
  <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
  <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
  <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
  <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
  <div data-options="region:'center',title:'Main Title'">
    <h2>页面布局 - Border Layout</h2>
    <div class="demo-info"> 布局面板将显示窗口分为上(north)、右(east)、下(south)、左(west)、中(center)五个方位，在实际使用时可以根据自己需要，不用全部创建出来。 </div>
  </div>
</div>
</div>
<h3>页面代码： </h3>
<pre name="code" class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
	&lt;title&gt;Border Layout - jQuery EasyUI Demo&lt;/title&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/default/easyui.css&quot;&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.easyui.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body class=&quot;easyui-layout&quot;&gt;
	&lt;div data-options=&quot;region:'north',border:false&quot; style=&quot;height:60px;background:#B3DFDA;padding:10px&quot;&gt;north region&lt;/div&gt;
	&lt;div data-options=&quot;region:'west',split:true,title:'West'&quot; style=&quot;width:150px;padding:10px;&quot;&gt;west content&lt;/div&gt;
	&lt;div data-options=&quot;region:'east',split:true,collapsed:true,title:'East'&quot; style=&quot;width:100px;padding:10px;&quot;&gt;east region&lt;/div&gt;
	&lt;div data-options=&quot;region:'south',border:false&quot; style=&quot;height:50px;background:#A9FACD;padding:10px;&quot;&gt;south region&lt;/div&gt;
	&lt;div data-options=&quot;region:'center',title:'Main Title'&quot;&gt;
	  &lt;h2&gt;页面布局 - Border Layout&lt;/h2&gt;
	  &lt;div class=&quot;demo-info&quot;&gt;
	    布局面板将显示窗口分为上(north)、右(east)、下(south)、左(west)、中(center)五个方位，在实际使用时可以根据自己需要，不用全部创建出来。
      &lt;/div&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>